<script setup lang="ts">
defineOptions({
  // eslint-disable-next-line vue/no-reserved-component-names
  name: "Dashboard",
  inheritAttrs: false,
});

import { cardInfo,listForRenderAgent} from "@/api/dashboard";
import { useTransition, TransitionPresets } from "@vueuse/core";
import SvgIcon from "@/components/SvgIcon/index.vue";


const duration = 5000;

// 收入金额
const assets = ref(0);
const amountOutput = useTransition(assets, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
assets.value = 2000;

// 访问数
const projects = ref(0);
const visitCountOutput = useTransition(projects, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
projects.value = 2000;

//消息数
const scenes = ref(0);
const messageCountOutput = useTransition(scenes, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
scenes.value = 2000;

// 订单数
const products = ref(0);
const orderCountOutput = useTransition(products, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
products.value = 2000;


const loadCardInfo=()=>{
	cardInfo({
	})
	.then(({result}) => {
		projects.value = result.projects;
		scenes.value = result.scenes;
		assets.value = result.assets;
		products.value = result.products;
	})
	.catch((e) => {
	})
	.finally(() => {
	});
}


	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(20);
	const tableData= ref([]);
	const currentChange=(cur:number)=>{
		_cur.value= cur;
		loadRenderAgent();
	}
	const loadRenderAgent=()=>{
		listForRenderAgent({
			cur:_cur.value,
			limit:_pageSize.value
		})
		.then(({result}) => {
			 const _data=result
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
			console.log(_data.list)
			
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}



onMounted(() => {
	loadCardInfo();
	loadRenderAgent();
});

</script>

<template>
  <div class="dashboard-container">

    <!-- 数据卡片 -->
    <el-row :gutter="40" class="mb-4">
      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
        <div class="data-box">
          <div
            class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
          >
            <svg-icon icon-class="template" size="3em" />
          </div>
          <div class="flex flex-col space-y-3">
            <div class="text-[var(--el-text-color-secondary)]">底板数</div>
            <div class="text-lg">
              {{ Math.round(visitCountOutput) }}
            </div>
          </div>
        </div>
      </el-col>
			

      <!--消息数-->
      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
        <div class="data-box">
          <div
            class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
          >
            <svg-icon icon-class="scene" size="3em" />
          </div>
          <div class="flex flex-col space-y-3">
            <div class="text-[var(--el-text-color-secondary)]">场景数</div>
            <div class="text-lg">
              {{ Math.round(messageCountOutput) }}
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
        <div class="data-box">
          <div
            class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
          >
            <svg-icon icon-class="asset" size="3em" />
          </div>
          <div class="flex flex-col space-y-3">
            <div class="text-[var(--el-text-color-secondary)]">资产数</div>
            <div class="text-lg">
              {{ Math.round(amountOutput) }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
        <div class="data-box">
          <div
            class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
          >
			<svg-icon icon-class="assembly" size="3em"/>
          </div>
          <div class="flex flex-col space-y-3">
            <div class="text-[var(--el-text-color-secondary)]">组件数</div>
            <div class="text-lg">
              {{ Math.round(orderCountOutput) }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
	
	<el-row :gutter="40">
	  <el-col :sm="24" :lg="24" class="mb-12">
			<div class="card">
			  <div class="head">
				  <span class="title">渲染节点</span>
			  </div>
			  <div class="body">
				  <el-table
				    :data="tableData"
				    style="width: 100%"
					:show-header="false"
				  >
				    <el-table-column prop="name" label="服务器"> </el-table-column>
				    <el-table-column prop="ip" label="IP"> </el-table-column>
				    <el-table-column prop="memoryTotal" label="memoryTotal"> </el-table-column>
				    <el-table-column prop="memoryFree" label="memoryFree"> </el-table-column>
				    <el-table-column prop="renderNumber" label="渲染路数"> </el-table-column>
				    <el-table-column prop="renderNumberFree" label="空闲"> </el-table-column>
				    <el-table-column prop="renderNumberUsed" label="占用"> </el-table-column>
				    <el-table-column prop="diskTotal" label="磁盘"> </el-table-column>
				    <el-table-column prop="diskFree" label="磁盘"> </el-table-column>
				  </el-table>
				  <div style="margin-top: 10px;" v-if="_totalPage>1">
				  	<el-pagination small background layout="prev, pager, next" :page-size="_pageSize" :total="_total" @current-change="currentChange" />
				  </div>
			  </div>
			</div>
	  </el-col>
	</el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;
  
  -moz-user-select:none; /* Firefox私有属性 */
  -webkit-user-select:none; /* WebKit内核私有属性 */
  -ms-user-select:none; /* IE私有属性(IE10及以后) */
  -khtml-user-select:none; /* Khtml内核私有属性 */
  -o-user-select:none; /* Opera私有属性 */
  user-select:none; /* CSS3属性 */

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
  
  .card{
	  background-color: #2a2d3e;
	  >.head{
			height: 40px;
			background-color: #2a2d3e;
			border-bottom: 1px solid #373c54;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 10px;
			.title{
				color: #ccc !important;
				font-size: 16px;
			}
	  }
  }
  
  
}
</style>
